<template>
<div>
    <el-dialog
  :title="isAddOrEdit === 'edit' ? '修改文章' : '新增文章'"
  :visible="dialogVisible"
  @close="close"
  width="60%">
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title" >
          <!-- ruleForm 对象里面的属性值 就要去后端接口文档里面找，和后端字段保持一致 -->
          <el-input v-model="ruleForm.title" placeholder="请输入文章标题">
          </el-input>
        </el-form-item>
        <el-form-item label="内容" prop="articleBody"  >
          <!-- https://www.npmjs.com/package/vue-quill-editor 跟着官网自己写步骤 -->

          <quill-editor v-model="ruleForm.articleBody" >

          </quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="ruleForm.videoURL" placeholder="请输入视频地址">
          </el-input>
        </el-form-item>
      </el-form>
</el-dialog>

</div>

</template>

<script>
import { detail, add, update } from '@/api/hmmm/articles.js'
export default {
  props: {
    isAddOrEdit: {
      type: String,
      required: true
    },
    type: {
      type: Number,
      required: true
    },
    pid: {
      type: [String, Number],
      required: true
    },
    id: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      dialogVisible: false,
      ruleForm: {
        title: '',
        videoURL: '',
        id: '',
        articleBody: '',
        reads: '',
        state: '',
        creator: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      list: []
    }
  },
  computed: {
    isEdit () {
      return this.isAddOrEdit === 'edit'
    }
  },
  created () {
    this.init()
    // this.modify()
  },
  methods: {
    openDialog (row) {
      this.dialogVisible = true
      this.list = row
      this.ruleForm.title = row.title
      this.ruleForm.articleBody = this.list.articleBody
      this.ruleForm.videoURL = this.list.videoURL
    },
    close () {
      this.dialogVisible = false
      this.ruleForm.title = ''
      this.ruleForm.articleBody =''
      this.ruleForm.videoURL=''
    },
    submit () {
      this.$refs.ruleForm.validate(async (value) => {
        if (value) {
          if (this.isAddOrEdit === 'edit') {
            await update({ id: +this.id, title: this.ruleForm.title, articleBody: this.ruleForm.articleBody, videoURL: this.ruleForm.videoURL })
            this.cancel()
          } else {
            const res = await add(this.ruleForm)
            console.log(res)
            this.cancel()
          }
          // 进入了这个分支，就证明校验成功，可以发请求了
          this.cancel()
          this.$emit('ADD_SUCCESS')
        }
      })
    },
    cancel () {
      this.dialogVisible = false
      this.$refs.ruleForm.resetFields()
    },
    async init () {
      console.log(1)
      if (this.isAddOrEdit === 'edit') {
        const res = await detail(this.pid)
        console.log(res)
        // this.ruleForm = res.data
      }
    }
    // async modify () {
    //   if (this.isAddOrEdit === 'edit') {
    //     // const res = await detail(this.ruleForm)
    //     // console.log(res)

    //   }
    // }
  }

}
</script>

<style scoped lang='less'>
  .dialog-footer{
    display: flex;
    justify-content: right;
  }
//  .myEdit {
//   width: 100%;
//   height: 100%; /* 设置编辑器的最小高度 */
//   border: 1px solid #ccc; /* 添加边框 */
//   border-radius: 4px; /* 添加圆角 */
//  }
</style>
